<template>
  <div class="pms">
    <a-table rowKey="id" :columns="columns" :data-source="tableData" bordered>
      <!-- 表头区域 -->
      <template slot="title">
        <a-button type="primary" @click="handleAdd()" v-if="$auth('SYSTEM.SYSTEM_PMS_ADD')">新增模块</a-button>
      </template>
      <template slot="operate" slot-scope="text, record">
        <a-tag v-for="(item,index) in record.child " :key="index" :closable="$auth('SYSTEM.SYSTEM_PMS_DELETE')" @close="e => hanldeRemove(e,item.id)">
          <span class="pointer" @click="handleEdit(item)">{{ item.name }}</span>
        </a-tag>
      </template>
      <template slot="isPublic" slot-scope="text">
        {{ text === 1 ? '公共权限' : '非公共权限' }}
      </template>
      <template slot="operation" slot-scope="text, record">
        <a-space>
          <a-button
            v-if="isShowAddSubButton(record) && $auth('SYSTEM.SYSTEM_PMS_ADD')"
            type="primary"
            size="small"
            @click="handleAdd(record,1)"
          >新增下级模块</a-button>
          <a-button
            v-if="isShowAddSubButton(record) && $auth('SYSTEM.SYSTEM_PMS_ADD')"
            type="primary"
            size="small"
            @click="handleAdd(record,2)"
          >新增页面操作</a-button>
          <a-button type="default" size="small" @click="handleEdit(record)" v-if="$auth('SYSTEM.SYSTEM_PMS_EDIT')">编辑</a-button>
          <a-button type="default" size="small" @click="handleEdit(record)" v-if="!$auth('SYSTEM.SYSTEM_PMS_EDIT') && $auth('SYSTEM.SYSTEM_PMS_DETAIL')">查看</a-button>
          <a-popconfirm title="是否要进行此操作?" ok-text="是" cancel-text="否" @confirm="activeDel(record.id)">
            <a-button type="warning" size="small" v-if="$auth('SYSTEM.SYSTEM_PMS_DELETE')">删除</a-button>
          </a-popconfirm>
        </a-space>
      </template>
    </a-table>

    <AddPmsModal
      ref="collectionForm"
      :is-edit="isEdit"
      :visible.sync="addVisible"
      :title="editType == 1 ? '编辑权限' : '新建权限'"
      :initialFormValue="formValue"
      @cancel="handleCancel"
      @submit="handleOk">

    </AddPmsModal>
  </div>
</template>
<script>
import { permissionList, addPermission, updatePermission, removePermission, permissionListByPro, addPermissionByPro, updatePermissionByPro, removePermissionByPro } from '@/api/system/pms'
import AddPmsModal from './components/addPmsModal.vue'

const columns = [
  {
    title: '权限名称',
    dataIndex: 'name',
    width: 200
  },
  {
    title: '页面操作',
    dataIndex: 'operate',
    scopedSlots: { customRender: 'operate' }
  },
  {
    title: '权限标识(前端)',
    dataIndex: 'url',
    width: 200
  },
  {
    title: '权限标识(后端)',
    dataIndex: 'code',
    width: 200
  },
  {
    title: '类型',
    dataIndex: 'isPublic',
    key: 'isPublic',
    width: 120,
    scopedSlots: { customRender: 'isPublic' }
  },
  {
    title: '操作',
    dataIndex: 'operation',
    width: 220,
    scopedSlots: { customRender: 'operation' }
  }
]
export default {
  components: {
    AddPmsModal
  },
  props: {
    type: {
      type: Number,
      default: 0
    }
  },
  data () {
    return {
      columns,
      labelCol: {
        span: 4
      },
      wrapperCol: {
        span: 18
      },
      queryParam: {},
      defFormValue: {
        module: 0,
        name: '',
        url: '',
        code: '',
        pid: 0,
        pids: '',
        isPublic: -1,
        type: 1 // 类型 1资源菜单 2 按钮
      },
      formValue: {
        description: '',
        name: '',
        url: '',
        code: '',
        pid: 0,
        pids: '',
        isPublic: -1,
        type: 1 // 类型 1资源菜单 2 按钮
      },
      editType: 0, // 0: 添加  1: 编辑
      addVisible: false,
      tableData: [],
      isEdit: false
    }
  },
  mounted () {
    this.getList()
  },
  methods: {
    getList () {
      if (this.$auth('SYSTEM.SYSTEM_PMS_LIST')) {
        if (this.$store.getters.project != null) {
          permissionListByPro({
            ...this.queryParam,
            proId: this.$store.getters.project.id,
            // proId: 30063,
            systemId: this.type
          }).then(res => {
            this.tableData = res
          })
        } else {
          permissionList(this.queryParam).then(res => {
            this.tableData = res
          })
        }
      } else {
        this.tableData = []
      }
    },
    isShowAddSubButton (record) {
      if (record.pids != null && record.pids.length > 0) {
        const pids = JSON.parse(record.pids)
        if (pids.length >= 4) {
          return false
        }
      }
      return true
    },
    // 新增权限
    handleAdd (record, module = 1) {
      if (record == null) {
        // 创建顶级权限
        this.formValue = this.defFormValue
      } else {
        let pids = null
        if (record.pid === 0) {
          // 二级权限
          pids = [0, record.id]
        } else {
          pids = JSON.parse(record.pids)
          pids.push(record.id)
        }
        this.formValue = {
          description: '',
          name: '',
          pid: record.id,
          pids: JSON.stringify(pids),
          isPublic: -1,
          type: 2,
          module: module
        }
      }
      this.addVisible = true
      this.editType = 0
      this.isEdit = true
    },
    handleEdit (record) {
      if (this.$auth('SYSTEM.SYSTEM_PMS_EDIT') || this.$auth('SYSTEM.SYSTEM_PMS_DETAIL')) {
        this.formValue = record
        this.addVisible = true
        this.editType = 1
        this.isEdit = !!this.$auth('SYSTEM.SYSTEM_PMS_EDIT')
      } else {
        this.$message.error('暂无编辑权限')
      }
    },
    handleCancel () {
      const form = this.$refs.collectionForm.form
      form.resetFields()
      this.formValue = this.defFormValue
      this.addVisible = false
    },
    // 新增下级权限
    addSubPms (record) {
      this.visibleBtn = true
      this.addBtnForm.pid = record.id
      let pids = null
      if (record.pid === 0) {
        // 二级权限
        pids = [0, record.id]
      } else {
        pids = JSON.parse(record.pids)
        pids.push(record.id)
      }
      this.addBtnForm.pids = JSON.stringify(pids)
      console.log('record', this.addBtnForm)
    },
    // 按钮权限
    handleBtnCancel () {
      this.visibleBtn = false
      this.$refs.ruleBtnForm.resetFields()
    },
    handleOk () {
      const form = this.$refs.collectionForm.form
      form.validateFields((err, values) => {
        if (!err) {
          console.log('Received values of form: ', values)

          if (this.editType === 0) {
            if (this.$store.getters.project != null) {
              addPermissionByPro({
                ...values,
                module: this.formValue.module,
                proId: this.$store.getters.project.id,
                // proId: 30063,
                systemId: this.type
              }).then(res => {
                this.$message.success('操作成功！')
                this.handleCancel()
                this.getList()
              })
            } else {
              addPermission({ ...values, module: this.formValue.module }).then(res => {
                this.$message.success('操作成功！')
                this.handleCancel()
                this.getList()
              })
            }
          } else {
            if (this.$store.getters.project != null) {
              updatePermissionByPro({
                ...values,
                proId: this.$store.getters.project.id,
                // proId: 30063,
                systemId: this.type
              }).then(res => {
                this.$message.success('操作成功！')
                this.handleCancel()
                this.getList()
              })
            } else {
              updatePermission(values).then(res => {
                this.$message.success('操作成功！')
                this.handleCancel()
                this.getList()
              })
            }
          }
        }
      })
    },
    // 删除
    hanldeRemove (e, id) {
      e.preventDefault()
      const that = this
      this.$confirm({
        title: '提示',
        content: '是否确定要删除？',
        onOk () {
          that.activeDel(id)
        }
      })
    },
    // 删除权限
    activeDel (id) {
      if (this.$store.getters.project != null) {
        removePermissionByPro({
          id,
          proId: this.$store.getters.project.id,
          // proId: 30063,
          systemId: this.type
        }).then(res => {
          console.log(res)
          this.$message.success('操作成功')
          this.getList()
        })
      } else {
        removePermission({
          id
        }).then(res => {
          console.log(res)
          this.$message.success('操作成功')
          this.getList()
        })
      }
    }
  }
}
</script>
